/* CSS Document */
$blue:#0543a7;
.index {
	.banner{ height: 510px;
		.swiper-container{ position: relative;
			.swiper-slide{ background-position: center; background-size: cover; height: 510px;

			}
			.swiper-pagination{ bottom: 5%; width: 100%; text-align: center;
				.swiper-pagination-bullet{ opacity: 1; background: none; margin: 0 5px; height: 7px; width: 7px; transition: $tr4; opacity: 1; border:1px solid $blue;
					&.swiper-pagination-bullet-active{ transition: $tr4; opacity: 1; background:$blue;}
				}
			}
		}
	}
	.i_about{ padding-bottom: 112px;
		.tit{
			img{ display: block; margin: 0px auto; }
		}
		.swiper-container{ position: relative;
			.swiper-slide{ text-align: center;
				.title{ font-size: 16px; color: #5f5f5f; margin-top: 60px; margin-bottom: 30px;}
				.des{ font-size: 14px; color: #5f5f5f; line-height: 2em; height: 6em; margin-bottom: 12px;
					span{ color: #1da233; }
				}
				.ico{ width: 124px; height: 124px; border-radius: 100%; overflow: hidden; margin: 0 auto; }
			}
			.swiper-pagination{ bottom: 5%; width: 100%; text-align: center;
				.swiper-pagination-bullet{ opacity: 1; background: none; margin: 0 5px; height: 7px; width: 7px; transition: $tr4; opacity: 1; border:1px solid $blue;
					&.swiper-pagination-bullet-active{ transition: $tr4; opacity: 1; background:$blue;}
				}
			}
		}
	}

	.i_what{ height: 405px; background: url(../images/i_what_bg.jpg);
		.tit{ width: 176px; height: 341px;  background: url(../images/i_what_tit_bg.png); position: relative;
			.text{ color: #333333; font-weight: bold; padding-top: 52px; position: absolute; left: 122px; width: 150px;
				b{ font-size: 20px; color: $blue; }
			}
			ul{ padding-top: 158px; padding-left: 26px;
				&::after{ content: ""; display: block; width: 20px; height: 2px; background: #158f24; margin-top: 4px; }
				li{ line-height: 30px; font-size: 14px; color: #158f24; }
			}
			.more{ width: 80px; display: block; margin-left: 26px; font-size: 12px; color: #333; border-bottom: 1px solid #333; line-height: 30px; height: 30px; margin-top: 30px; }
		}
		.inner{ width: 974px; padding-top: 172px;
			.des{ font-size: 14px;  line-height: 24px; margin-bottom: 30px;}
			ul{ display: block; width: 612px; margin: 0px auto;
				li{ float: left; padding: 0 70px; font-size: 16px;
					.ico{ display: block; width: 62px; height: 62px; border-radius: 100%; color: #fff; margin-bottom: 20px;
						&.green{ background: url(../images/i_what_pic1.png) #26ad60 no-repeat center; }
						&.blue{ background: url(../images/i_what_pic2.png) #2982bc no-repeat center; }
						&.orgin{ background: url(../images/i_what_pic3.png) #ea7b22 no-repeat center; }
					}
				}
			}
		}
	}

	.i_youshi{
		.tit{
			img{ display: block; margin: 0px auto; }
		}
		.dbtit{ width: 155px; height: 40px; background: #5b8dde; color: #fff; line-height: 40px; padding-left: 18px; font-size: 18px;
			i{ display: inline-block; margin-left: 35px; vertical-align: middle; font-style: normal; margin-top: -3px;}
		}
		.pk_pic{
			img{ display: block; margin: 40px auto 0; }
		}
		.pk_list{ height: 404px; background: url(../images/pk_bg.png)  no-repeat center; margin-top: 35px; margin-bottom: 130px;
			.item{ height: 95px; position: relative; margin-bottom: 8px;
				.pk_i{ width: 78px; height: 95px; margin: 0px auto; position: relative; z-index: 99; }
				.pk_l{ background: #77bd3b; color: #fff; width: 46%; padding-left: 4%; position: absolute; top: 26px; left: 0; height: 54px; line-height: 54px; border-radius: 50px 0 0 50px; font-size: 14px;
					&.lang{ line-height: 18px; height: 36px; padding: 9px 0 9px 4%;}
				}
				.pk_r{ background: #eeeeee; color: #6d6d6d; width: 42%; padding-left: 8%; position: absolute; top: 26px; right: 0; height: 54px; line-height: 54px; border-radius: 0 50px 50px 0; font-size: 14px;  }
			}
		}
	}

	.i_trq{ height: 382px; background: url(../images/trq_bg.jpg)  no-repeat center bottom;
		.tit{ width: 159px; height: 339px; background: url(../images/i_trq_tit_bg.png)  no-repeat center; float: right; position: relative;
			.text{ position: absolute; top: 63px; color: #14368d; font-size: 22px; font-weight: bold; left: -30px; }
			ul{ padding-top: 150px;
				li{ text-align: right; color: #158f24; font-size: 14px; line-height: 30px; padding-right: 30px; }
				&::after{ content: ""; display: block; width: 20px; height: 2px; background: #158f24; margin-top: 4px; margin-left: 108px; }
			}
			.more{ width: 80px; display: block; margin-left: 26px; font-size: 12px; color: #333; border-bottom: 1px solid #333; line-height: 30px; height: 30px; margin-top: 30px; text-align: right; margin-left: 50px; }
		}
	}

	.i_qyys{
		.tit{ border-bottom: 1px solid #5b8dde;
			span{ width: 155px; height: 40px; background: #5b8dde; color: #fff; line-height: 40px; padding-left: 18px; display: block; font-size: 18px;
				i{ display: inline-block; margin-left: 35px; vertical-align: middle; font-style: normal; margin-top: -3px;}

			}
		}
	}

	.i_service{
		.tit{
			img{ display: block; margin: 0 auto; }
		}
		.inner{
			.left{ width: 474px; margin-right: 4px; height: 547px;
				.top{ height: 175px; margin-bottom: 4px;
					.title{ background: #51bee2; color: #fff; height: 175px; width: 235px;text-align: center; float: left; margin-right: 4px;
						.ch{ font-size: 30px; line-height: 1em; }
						.en{ font-size: 16px; font-family: Arial; line-height: 1em; }
						.line{ background: #fff; width: 14px; height: 1px; margin: 0 auto 4px;
							&.lang{ width: 23px; }
						}
					}
					.pic{ height: 175px;  width: 235px; float: left; background-size: cover; background-position: center; }
				}
				.bottom{ width: 474px;height: 368px; background-size: cover; background-position: center; }
			}
			.middle{ width: 483px; height: 547px; margin-right: 4px;
				.top{ background-size: cover; background-position: center; height: 368px; width:483px ; margin-bottom: 4px; }
				.bottom{ background-size: cover; background-position: center; height: 175px; width:483px ;}
			}
			.right{ width: 235px; height: 547px;
				.top{ background-size: cover; background-position: center; height: 368px; width:235px ; margin-bottom: 4px; }
				.bottom{ background: #ec7a1f; height: 175px; width:235px; color: #fff; text-align: center;
					a{ display: block; color: #fff; height: 175px; width:235px; }
					.ch{ font-size: 24px; line-height: 1em; }
					.en{ font-size: 16px; font-family: Arial; line-height: 1em; }
					img{ display: block; margin: 10px auto 0; transition: $tr4; }
					&:hover{
						img{ transform: rotate(90deg); transition: $tr4; }
					}
				}
			}
		}
	}

	.i_contact{ height: 383px; background: #eeeeee;
		.tit{ padding: 48px 0 44px;
			img{ display: block; margin: 0 auto; }
		}
		.list{
			.item{ float: left; background: #fff; text-align: center; width: 316px; margin-right: 126px; padding: 33px 0;
				.ico{ img{ line-height:0; font-style: normal; }}
				.title{ color: #0543a7; font-weight: bold; }
				.line{ width: 34px; height: 4px; background: #0543a7; margin: 14px auto 19px;}
				.des{ font-size: 14px; color: #444444; }
				&.bor{ border-bottom: 1px solid #0543a7; }
			}
		}
	}
}
